<template>
  <div class="color-switcher">
    <div class="color-switcher-header">切换主题</div>
    
    <div class="color-palette">
      <div
        v-for="(preset, index) in colorPresets"
        :key="index"
        class="color-item"
        :class="{ 'active': currentColorIndex === index }"
        :style="{
          backgroundColor: preset.backgroundColor,
          color: preset.titleColor
        }"
        @click="handleColorChange(index)"
      >
        <div class="color-name">主题 {{ index + 1 }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { InfoWindowColorConfig } from '@/utils/infoWindowService';

// 定义事件
const emit = defineEmits<{
  colorChange: [config: InfoWindowColorConfig];
}>();

// 预设的8种颜色配置 - 优化后的配色方案
const colorPresets = ref<InfoWindowColorConfig[]>([
  {
    backgroundColor: '#F36923', // 橙色（保留原始配色）
    titleColor: '#ffffff',
    priceColor: '#000000',
    priceBgColor: '#ffffff'
  },
  {
    backgroundColor: '#14AE5C', // 深绿色
    titleColor: '#ffffff',
    priceColor: '#000000',
    priceBgColor: '#ffffff'
  },
  {
    backgroundColor: '#2D7DD2', // 深蓝色
    titleColor: '#ffffff',
    priceColor: '#000000',
    priceBgColor: '#ffffff'
  },
  {
    backgroundColor: '#FFD166', // 柔和黄色
    titleColor: '#2B2D42',
    priceColor: '#000000',
    priceBgColor: '#ffffff'
  },
  {
    backgroundColor: '#EF233C', // 鲜红色
    titleColor: '#ffffff',
    priceColor: '#000000',
    priceBgColor: '#ffffff'
  },
  {
    backgroundColor: '#8A2BE2', // 紫色
    titleColor: '#ffffff',
    priceColor: '#000000',
    priceBgColor: '#ffffff'
  },
  {
    backgroundColor: '#2EC4B6', // 青绿色
    titleColor: '#ffffff',
    priceColor: '#000000',
    priceBgColor: '#ffffff'
  },
  {
    backgroundColor: '#4A4E69', // 深灰色
    titleColor: '#ffffff',
    priceColor: '#000000',
    priceBgColor: '#ffffff'
  }
]);

// 当前选中的颜色配置索引
const currentColorIndex = ref(0);

/**
   * 处理颜色配置切换
   * @param index 颜色配置索引
   */
const handleColorChange = (index: number): void => {
  currentColorIndex.value = index;
  // 触发颜色切换事件，让父组件处理实际的颜色设置
  emit('colorChange', colorPresets.value[index]);
};
</script>

<style scoped>
/* 颜色切换组件样式 */
.color-switcher {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  min-width: 180px;
  display: block;
}

/* 调试信息样式 */
.debug-message {
  font-size: 10px;
  color: #666;
  background-color: #f9f9f9;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.debug-message p {
  margin: 0;
  padding: 0;
}

.color-switcher-header {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  text-align: center;
}

.color-palette {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.color-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 11px;
  min-height: 50px;
  justify-content: center;
  position: relative;
}

.color-item:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.color-item.active {
  border: 2px solid #2d8cf0;
  box-shadow: 0 2px 12px rgba(45, 140, 240, 0.3);
}

.color-name {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}
</style>